"use client";

import React from "react";
import { debounce } from "@/libs/util";
import { RecommendBackImg } from "../../constant";
import "./index.css";

interface RecommendItem {
    setId: string;
    setName: string;
    setHeat: number;
}

interface RecommendListProps {
    recommendSetList: RecommendItem[];
    onHandleSetId: (setId: string) => void;
}

const RecommendList: React.FC<RecommendListProps> = ({
    recommendSetList,
    onHandleSetId,
}) => {
    /**
     * 点击推荐套题
     */
    const handleSetId = (setId: string) =>
        debounce(() => {
            onHandleSetId(setId);
        });

    return (
        <div className="recommend-list-container">
            <div className="recommend-list-title">
                根据本次练习，为你推荐以下内容
            </div>
            <div className="recommend-list-content">
                {recommendSetList.map((item, index) => (
                    <div
                        key={item.setId}
                        className="recommend-list-item"
                        style={{
                            backgroundImage: `url(${RecommendBackImg[index % 4]})`,
                        }}
                        onClick={handleSetId(item.setId)}
                    >
                        <div className="recommend-list-item-name">
                            {item.setName}
                        </div>
                        <div className="recommend-list-item-heat">
                            热度指数：{item.setHeat}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default RecommendList;
